<!--
 * @Descripttion:
 * @version:
 * @Author:
 * @Date: 2019-10-25 09:24:46
 -->
<template>
  <el-form
    class="dynamic-form"
    :inline="formConfig.inline"
    :model="value"
    :label-position="formConfig.labelPosition"
    :label-width="formConfig.labelWidth"
    :size="formConfig.size"
    :status-icon="formConfig.statusIcon"
  >
    <dynamicFormItem
      v-for="item in formConfig.formItemList"
      :key="item.key"
      :item="item"
      :value="value[item.key]"
      @change="handleInput($event, item.key)"
    ></dynamicFormItem>
  </el-form>
</template>
<script>
import dynamicFormItem from "./baseComponents/index";
export default {
  name: "DynamicForm",
  components: {
    dynamicFormItem
  },
  mounted() {
    this.setDefaultValue();
  },
  computed: {},
  props: {
    formConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  watch: {
    formConfig: {
      handler() {
        this.formConfig.formItemList.forEach(({ key, value }) => {
          console.log(key, value);
          if (this.value[key] === undefined || this.value[key] === null) {
            this.value[key] = value;
          }
        });
      }
    }
  },
  methods: {
    setDefaultValue() {
      // 设置默认值
    },
    handleInput(val, key) {
      console.log(key, val);
      this.value[key] = val;
    }
  }
};
</script>
